<template>
	<div>
    <div id="check">
      <div class="check-container" v-for="(wgs,i) in wgArr" :key="i">
        <div class="watermark"><img class="watermark-img" src="@/assets/img/watermark.jpg" /></div>
        <div class="content">
          <div style="height: 50px"></div>
          <div class="check-box">
            <div class="page-header1">
              <table border="1">
                <tr>
                	<td class="w-450 h-100">
                    <el-row>
                      <el-col :span="10" :offset="2">
                        <img src="@/assets/img/logoNew.png" style="height: 70px" />
                      </el-col>
                      <el-col :span="11" :offset="1">
                        <b style="font-size: 35px;line-height: 2;">成都倍特</b>
                      </el-col>
                    </el-row>
                  </td>
                  <td colspan="2" class="w-450 h-100 text-center">制药用水、纯蒸汽等样品检验通知单</td>
                </tr>
                <tr>
                	<td class="w-450 h-30"><div class="m-l-5">记录编号 No: ZK/SMP·028-R01</div></td>
                  <td class="w-225 h-30"><div class="m-l-5">版本号 Version: 04</div></td>
                  <!-- <td class="w-225 h-30"><div class="m-l-5">版本号 Version: 03</div></td> -->
                  <td class="w-225 h-30"><div class="m-l-5">页码 Page: {{ (i+1) + '/' + wgArr.length }}</div></td>
                </tr>
              </table>
            </div>
            <div class="page-main">
              <div class="get-date">取样日期：{{ checkList.getDate | showTime }}</div>
              <div class="table-header">
                <table border="1">
                  <tr>
                  	<td class="w-130 h-60 text-center">样品名称</td>
                    <td class="w-340 h-60"><div class="m-l-5">{{ checkList.productName }}</div></td>
                    <td class="w-100 h-60 text-center">批&nbsp;&nbsp;号</td>
                    <td class="w-300 h-60"><div class="m-l-5">{{ checkList.batchNum }}</div></td>
                  </tr>
                  <tr>
                  	<td class="w-130 h-60 text-center">物料代码</td>
                    <td class="w-340 h-60"><div class="m-l-5">{{ checkList.productGmp }}</div></td>
                    <td class="w-100 h-60 text-center">样 品 量</td>
                    <td class="w-300 h-60"><div class="m-l-5">{{ getCount + '个' }}</div></td>
                  </tr>
                  <tr>
                  	<td class="w-130 h-60 text-center">取样容器</td>
                    <td class="h-60" colspan="3">
                      <div class="m-l-5">
                        <div class="select-box"><img v-if="ysList.packContainerName == '玻璃'" style="display: block;" src="@/assets/img/benefits.png" /></div>玻璃
                        <div class="select-box"><img v-if="ysList.packContainerName == '其他'" style="display: block;" src="@/assets/img/benefits.png" /></div>其他
                      </div>
                    </td>
                  </tr>
                  <tr>
                  	<td class="h-80" colspan="4">
                  	  <div class="m-l-5">
                        请验目的：
                        <div class="select-box"><img v-if="ysList.checkPurposeName == '常规检验'" style="display: block;" src="@/assets/img/benefits.png" /></div>常规检验；
                        <div class="select-box"><img v-if="ysList.checkPurposeName == '特殊检验'" style="display: block;" src="@/assets/img/benefits.png" /></div>特殊检验；
                        <div class="select-box"><img v-if="ysList.checkPurposeName == '复验'" style="display: block;" src="@/assets/img/benefits.png" /></div>复验；
                        <div class="select-box"><img v-if="ysList.checkPurposeName == '其他'" style="display: block;" src="@/assets/img/benefits.png" /></div>其他。
                  	  </div>
                  	</td>
                  </tr>
                </table>
              </div>
              <div class="table-foot">
                <table border="1" style="width: 100%">
                  <tr>
                  	<td class="w-64 h-60 text-center">序号</td>
                    <td class="w-160 h-60 text-center">取样点</td>
                    <td class="w-160 h-60 text-center">理化检验取样量</td>
                    <td class="w-160 h-60 text-center">微生物检验取样量</td>
                    <td class="w-160 h-60 text-center">内毒素检验取样量</td>
                    <td class="h-60 text-center">取样人</td>
                  </tr>
                  <tr v-for="(wg,j) of wgs" :key="j">
                  	<td class="w-64 h-60 text-center">{{ j+1 }}</td>
                    <td class="w-160 h-60 text-center">{{ wg.waterGetName }}</td>
                    <td class="w-160 h-60 text-center">{{ wg.cgyqs[0] }}</td>
                    <td class="w-160 h-60 text-center">{{ wg.cgyqs[1] }}</td>
                    <td class="w-160 h-60 text-center">{{ wg.cgyqs[2] }}</td>
                    <td v-if="j==0" class="text-center" rowspan="10"></td>
                  </tr>
                  <tr>
                  	<td class="h-60" colspan="3"><div class="m-l-5">请验部门：质量控制部</div></td>
                    <!-- <td class="h-60" colspan="3"><div class="m-l-5">请验部门：{{ checkList.registCheckDepartmentName }}</div></td> -->
                    <td class="h-60" colspan="3"><div class="m-l-5">请验日期：{{ checkList.registCheckDate | showTime }}</div></td>
                  </tr>
                  <tr>
                  	<td class="h-80" colspan="3"><div class="m-l-5">请 验 人：</div></td>
                    <td class="h-80" colspan="3"><div class="m-l-5">请验单接收人/日期： </div></td>
                  </tr>
                </table>
                <div style="margin-top: 13px;">
                  注：在相应选项“<div class="select-box" />”内用“<img style="display: inline-block;" src="@/assets/img/benefits.png" />”表示。
                </div>
                <div class="page-foot text-center">
                  <div style="font-family: arial">
                    This document is strictly confidential.Any use and copy unauthorized by CHENGDU BRILLIANT PHARMACEUTICAL <b><i>is forbidden.</i></b>
                  </div>
                  <div>
                    本文件仅限成都倍特药业股份有限公司内部使用，严禁任何无授权使用、泄露或复印，违者必究。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
  import {
    getCheckInfo,
    getYsQuantityInfo
  } from '@/api/check'
  import { CODE_OK } from '@/common/js/config'
  import { isBlank,parseTime } from '@/common/js/utils'
	export default {
    data() {
      return {
        visible: false,
        checkList: {},
        ysList: {},
        getCount: 0,
        wgArr: []
      }
    },
    props: ["childDataForm"],
    created() {
      if (!isBlank(this.childDataForm)) {
        this.checkList = this.childDataForm
        this.getData()
        this.visible = true
      }
    },
    methods: {
      getData() {
        const params = {
          content: 'ys',
          checkId: this.checkList.checkId
        }
        getCheckInfo(params).then(res => {
          if (res.code === CODE_OK) {
          	this.ysList = res.info.ysList
            getYsQuantityInfo(params).then(res => {
              if (res.code === CODE_OK) {
                let wgs = res.cgys.map(v => {
                  v = this.wgFilter(v)
                  return v
                })
                this.getCount = wgs.length
                this.wgArr = this.wgArrFilter(wgs)
              }else{
                this.$message.error(res.msg)
              }
            })
          }else{
          	this.$message.error(res.msg)
          }
        })
      },
      wgFilter(wg) {
        let getPrefix = this.checkList.productGmp + '-' + this.ysList.workshopCode + '-'
        wg.waterGetName = getPrefix + wg.waterGetName
        let orgCgyqs = JSON.parse(JSON.stringify(wg.cgyqs))
        wg.cgyqs = ['/','/','/']
        for (let cgyq of orgCgyqs) {
          if (cgyq.waterQuantityName == '理化检验取样量') {
            wg.cgyqs[0] = cgyq.waterQuantity + 'ml'
          }else if(cgyq.waterQuantityName == '微生物检验取样量') {
            wg.cgyqs[1] = cgyq.waterQuantity + 'ml'
          }else if(cgyq.waterQuantityName == '内毒素检验取样量') {
            wg.cgyqs[2] = cgyq.waterQuantity + 'ml'
          }
        }
        return wg
      },
      wgArrFilter(wgs) {
        if (wgs.length % 10 != 0) {
          //填充
          for (;;) {
            wgs.push({
              waterGetName: '/',
              cgyqs: ['/','/','/']
            })
            if (wgs.length % 10 == 0) break
          }
        }
        //分割
        let index = 0
        let newArr = []
        while(index < wgs.length) {
            newArr.push(wgs.slice(index, index += 10))
        }
        return newArr
      },
      close() {
        this.visible = false
        this.$emit('close')
      }
    }
	}
</script>

<style type="text/scss" lang="scss" scoped>
  .check-container{
    color: black;
    background-color: #fff;
    font-family: SimSun;
    font-size: 20px;
    width: 960px;
    height: 1480px;
    padding: 15px;
    .watermark{
      position: absolute;
      margin-top: 250px;
      .watermark-img{
        width: 960px;
      }
    }
    .content{
      position: relative;
      .check-box{
        width: 900px;
        height: 1400px;
        margin: 0 15px;
        .page-header1{
          height: 130px;
        }
        .page-main{
          height: 1270px;
          margin: 0 15px;
          .get-date{
            height: 70px;
            line-height: 4.5;
          }
          .table-header{
            height: 260px;
          }
          .table-foot{
            width: 100%;
            height: 500px;
          }
        }
        .page-foot{
          margin-top: 35px;
          border-top: solid black 1.5px;
          font-size: 13px;
        }
      }
    }
    .w-450{
      width: 450px;
    }
    .w-225{
      width: 225px;
    }
    .w-130{
      width: 130px;
    }
    .w-340{
      width: 340px;
    }
    .w-100{
      width: 100px;
    }
    .w-300{
      width: 300px;
    }
    .w-64{
      width: 64px;
    }
    .w-160{
      width: 160px;
    }
    .h-100{
      height: 100px;
    }
    .h-50{
      height: 50px;
    }
    .h-60{
      height: 60px;
    }
    .h-80{
      height: 80px;
    }
    .h-40{
      height: 40px;
    }
    .m-l-5{
      margin-left: 5px;
    }
    .select-box{
      display: inline-block;
      width: 15px;
      height: 15px;
      border: 1px solid black;
    }
  }
</style>
